<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>商城用户登录</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" th:href="@{/css/login.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script type="text/javascript" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
</head>

<body onkeydown="enterSubmit(event)" class="login-bg">
<div class="login layui-anim layui-anim-up">
    <div class="message">登录您的账户</div>
    <div id="darkbannerwrap"></div>
    <div class="layui-form">
        <form th:action="@{/admin/login}" method="post">
            <span class="x-red" th:if="${session.errorMsg != null}" th:text="${session.errorMsg}"></span>
            <input name="adminname" lay-verify="required" placeholder="用户名" type="text" class="layui-input">
            <hr class="hr15">
            <input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input">
            <hr class="hr15">
            <div id="slider"></div>
            <hr class="hr15">
            <input id="login" value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
            <hr class="hr20">
        </form>
    </div>
</div>
<script>
    function enterSubmit(obj) {
        //当enter 键按下后，需要执行的事件
        var button = document.getElementById('login');
        if (obj.keyCode == 13) {
            button.click();
        }
    }

    layui.config({
        base: '/js/'
    }).use(['sliderVerify', 'form', 'layer'], function () {
        var form = layui.form,
            layer = layui.layer,
            sliderVerify = layui.sliderVerify

        var slider = sliderVerify.render({
            elem: '#slider',
            // 当验证通过回调
            onOk: function () {
                layer.msg("滑块验证通过");
            }
        });

        // 监听提交
        form.on('submit(login)', function (data) {
            // 用于表单验证是否已经滑动成功
            if (!slider.isOk()) {
                layer.msg("请先通过滑块验证");
            }
        });
    });
</script>
</body>
</html>